<template>
    <div>
        <div class="parameter_page">
          <el-form ref="form"  label-width="150px" style="width: 80%" >
            <el-row v-for="(item,index) in dataList">
              <el-col :span="10">
                <el-form-item :label="item.groupName">
                  <el-input maxlength="20" v-model="item.value" :key="item.name" :onblur="calculateSalaryFun()" v-if="index > 2 && item.code !='wxyjzjcb'"></el-input>
                  <el-input maxlength="20" v-model="item.value" :key="item.name" v-else></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button type="primary" @click="saveEdit('form')">保存</el-button>
    </div>
</template>

<script>
    import { selectAll,addParameter} from '../../api/parameter';
    import { _dateFormat} from '../../utils/tool';
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
        name: 'basetable',
        components: { ElImageViewer },
        data() {
            return {
                query: {
                    status:'',
                    pageIndex: 1,
                    pageSize: 10
                },
                previewFlg:false,
                previewSrc: '',
                tableData: [],
                multipleSelection: [],
                groupList:[],
                editVisible: false,
                pageTotal: 0,
                form: {
                },
                dataList:[{
                  value:"",
                  code:"zptcbl",
                  groupName:"招聘提成比例"
                },{
                  value:"",
                  code:"swtcbl",
                  groupName:"渠道推荐提成比例"
                },{
                  value:"",
                  code:"yytcbl",
                  groupName:"运营提成比例"
                },{
                  value:"",
                  code:"ylbxcb",
                  groupName:"养老保险成本"
                },{
                  value:"",
                  code:"ylbxcb2",
                  groupName:"医疗保险成本"
                },{
                  value:"",
                  code:"sybxcb",
                  groupName:"失业保险成本"
                },{
                  value:"",
                  code:"sybxcb2",
                  groupName:"生育保险成本"
                },{
                  value:"",
                  code:"gsbxcb",
                  groupName:"工商保险成本"
                },{
                  value:"",
                  code:"gjjcb",
                  groupName:"公积金成本"
                },{
                  value:"",
                  code:"wxyjzjcb",
                  groupName:"五险一金总计成本"
                }],
                idx: -1,
                id: -1,
            };
        },
        created() {
            this.getData();
        },
        filters:{
            //格式化后台传过来的时间戳
            dateFormat(time) {
                let date = new Date(time);
                return _dateFormat(date,'yyyy-MM-dd hh:mm')
            },
        },
        methods: {
            // 获取list
            getData() {
              var that = this;
                selectAll(this.query).then(res => {
                  that.tableData = res;
                  for (var i =0; i< that.dataList.length;i++){
                      for (var j =0; j< res.length;j++) {
                        if (that.dataList[i].code ==  res[j].code){
                          that.dataList[i].value = res[j].value;
                        }
                      }
                    }
                });
            },
                // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 保存编辑
            saveEdit(formData) {
                var that = this;
                // 新增
                addParameter(this.dataList).then(res => {
                  this.$message.success("保存成功");
                  this.getData();
                  this.butCancel();
                }).catch((res) => {
                  this.$message.error(res.errorMsg);
                });
            },
            butCancel(){
                this.editVisible = false;
                Object.keys(this.form).forEach(key => (this.form[key] = ''));
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
            // 计算
            calculateSalaryFun(){

            }
        }
    };
</script>

<style scoped>
    .parameter_page{
      display: flex;
      justify-content: center;
      align-items: center;
    }
</style>
